<template>
  <div>
    <el-row>
      <el-col>
        <div id="sanchi" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import bus from '../../bus';

  export default {
    data() {
      return {
        msg: '',
        isShow: false,
        dts: '',
        dts1: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('sanchi'));

        var data = {
          '3000': [
            [100],
            [],
          ],
          '2000': [
            [80],
            [],
          ],
          '1794': [
            [60],
            [],
          ],
          '1200': [
            [40],
            [],
          ],
          '800': [
            [20],
            [],
          ],
        };
        var nodedata = [];
        var university = '3000';
        for (var key in data) {
          var totalnum = data[key][0].reduce(function (a, b) {
            return a + b;
          }, 0) + data[key][1].reduce(function (a, b) {
            return a + b;
          }, 0)
          if (key == university) {
            nodedata.push({
              name: key,
              symbolSize: Math.max(totalnum, 7),
              value: data[key][2],
              label: {
                color: 'rgba(193,56,52,1)'
              },
              itemStyle: {
                normal: {
                  color: 'rgba(193,56,52,1)'
                }
              }
            })
          } else {
            nodedata.push({
                name: key,
                symbolSize: Math.max(totalnum, 3),
                value: data[key][2],
                label: {
                  color: 'black'
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(51,71,85,1)'
                  }
                }

              }
            )
          }
        }

        myChart.setOption({

          tooltip: {
            formatter: '{b}:<br />医生数量： {c}人'
          },
          color: ['rgb(100,200,300)'],
          series: [
            {
              name: '全部医生',
              type: 'treemap',
              visibleMin: 100,
              data: [ // 注意，最外层是一个数组，而非从某个根节点开始。


                {
                  value: 2389, // value字段的值，对应到面积大小。
                  // 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。
                  // 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。
                  id: 'someid-1', // id 不是必须设置的。
                  // 但是如果想使用 API 来改变某个节点，需要用 id 来定位。
                  name: 'C类  17.69%', // 显示在矩形中的描述文字。


                  children: [
                    {   value: 1125,
                      id: 'someid',
                      name: 'C1',
                    }, {
                      value: 765.63,
                      id: 'someid-32',
                      name: 'C2',
                    }, {
                      value: 498,
                      id: 'someid-33',
                      name: 'C3',
                    },
                  ],
                  label: { // 此节点特殊的 label 定义（如果需要的话）。
                    // ...         // label的格式参见 series-treemap.label。
                  },
                  itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。
                    // ...         // label的格式参见 series-treemap.itemStyle。
                    normal: {
                      color: '#709303',
                    }
                  }
                }, {
                  value: 7138,
                  id: 'someid-2',
                  name: 'A类  52.84%',
                  children: [
                    {   value: 1410,
                      id: 'someid-31',
                      name: 'A1',
                    }, {
                      value: 1790,
                      id: 'someid-32',
                      name: 'A2',
                    }, {
                      value: 2045,
                      id: 'someid-33',
                      name: 'A3',
                    }, {
                      value: 1891,
                      id: 'someid-34',
                      name: 'A4',
                    },
                  ],

                  itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。
                    // ...         // label的格式参见 series-treemap.itemStyle。
                    normal: {
                      color: '#d9af1a',
                    }
                  }

                }, {
                  value: 3584,
                  id: 'someid-3',
                  name: 'B类  26.53%',
                  children: [
                    {   value: 366,
                      id: 'someid-31',
                      name: 'B1',
                    }, {
                      value: 886,
                      id: 'someid-32',
                      name: 'B2',
                    }, {
                      value: 1143,
                      id: 'someid-33',
                      name: 'B3',
                    }, {
                      value: 1188,
                      id: 'someid-34',
                      name: 'B4',
                    },
                  ],

                  itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。
                    // ...         // label的格式参见 series-treemap.itemStyle。
                    normal: {
                      color: '#1d9486',
                    }
                  }


                }, {
                  value: 397,
                  id: 'someid-4',
                  name: 'D类  2.94%',
                  children: [
                    {   value: 48,
                      id: 'someid-31',
                      name: 'D1',
                    }, {
                      value:59,
                      id: 'someid-32',
                      name: 'D2',
                    }, {
                      value: 115,
                      id: 'someid-33',
                      name: 'D3',
                    }, {
                      value: 172,
                      id: 'someid-34',
                      name: 'D4',
                    },
                  ],

                  itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。
                    // ...         // label的格式参见 series-treemap.itemStyle。
                    normal: {
                      color: '#e54c4c',
                    }
                  }

                }

              ]
            },
            // {
            //     value: [23, 59, 12]
            //     // 如果没有children，可以不写
            // },
            // ...
          ]
        } )

        myChart.on('click', function (p) {
          if (p.seriesType == 'treemap') {
            if(p.nodeData){
              if(p.treePathInfo.length == 1){
                this.dts = p.treePathInfo[0].value;
                this.dts1 = p.treePathInfo[0].name;
                this.isShow = true;
                bus.$emit('isShow', this.isShow);
                bus.$emit('dts', this.dts);
                bus.$emit('dts1', this.dts1);
              }
              if(p.treePathInfo.length == 2){
                this.dts = p.treePathInfo[1].value;
                this.dts1 = p.treePathInfo[1].name;
                this.isShow = true;
                bus.$emit('isShow', this.isShow);
                bus.$emit('dts', this.dts);
                bus.$emit('dts1', this.dts1);
              }
            }else{
              this.dts = p.data.value;
              this.dts1 = p.data.name;
              this.isShow = true;
              bus.$emit('isShow', this.isShow);
              bus.$emit('dts', this.dts);
              bus.$emit('dts1', this.dts1);
            }

          }
          /*          if (p.seriesType == 'graph') {
                      var university = p.name;
                      var nodedata = [];
                      for (var key in data) {
                        var totalnum = data[key][0].reduce(function (a, b) {
                          return a + b;
                        }, 0) + data[key][1].reduce(function (a, b) {
                          return a + b;
                        }, 0);
                        if (key == university) {
                          nodedata.push({
                            name: key,
                            symbolSize: Math.max(totalnum, 7),
                            value: data[key][1],
                            label: {
                              color: 'rgba(193,56,52,1)'
                            },
                            itemStyle: {
                              normal: {
                                color: 'rgba(193,56,52,1)'
                              }
                            },
                          })
                        } else {
                          nodedata.push({
                              name: key,
                              symbolSize: Math.max(totalnum, 3),
                              value: data[key][1],
                              label: {
                                color: 'black'
                              },
                              itemStyle: {
                                normal: {
                                  color: 'rgba(51,71,85,1)'
                                }
                              },
                            }
                          )
                        }
                      }
                      myChart.setOption({
                        title: {
                          subtext: university,
                        },
                        series: [{
                          data: nodedata
                        }]
                      });
                      this.dts = university;
                      this.isShow = true;
                      bus.$emit('isShow', this.isShow);
                      bus.$emit('dts', this.dts);
                    }*/
        })






// });


      }

    }
  }
</script>

<style scoped>

</style>
